<template>
  <slash-panel>
    <slash-panel-header :title="title" />
    <slash-panel-body>
      <n-tabs default-value="menu" type="bar" animated>
        <n-tab-pane name="menu" tab="菜单资源维护" class="slash-tab">
          <SysResourceMenuLayout />
        </n-tab-pane>
        <n-tab-pane name="api" tab="接口资源维护" class="slash-tab">
          <SysResourceApiList />
        </n-tab-pane>
      </n-tabs>
    </slash-panel-body>
  </slash-panel>
</template>

<script lang="ts">
import { SlashPanel, SlashPanelBody, SlashPanelHeader } from "../../components/Panel/index";
import { onMounted, ref } from "vue";
import SlashAppContext from "@/context/SlashAppContext";
import SysResourceMenuLayout from "./Menu/SysResourceMenuLayout.vue";
import SysResourceApiList from "@/views/SysResource/Api/SysResourceApiList.vue";

export default {
  name: "SysResourceEntry",
  components: {
    SysResourceApiList,
    SysResourceMenuLayout,
    SlashPanelBody,
    SlashPanelHeader,
    SlashPanel
  },
  setup() {
    const title = ref("应用资源管理");
    onMounted(() => {
      title.value = SlashAppContext.getRequest().slashInnerTitle || "应用资源管理";
    });
    return {
      title
    };
  }
};
</script>

<style scoped>
.slash-tab {
  padding: 5px !important;
}
</style>
